<template>
  <div>
    <el-button-group style="margin-bottom: 10px;">
      <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="clearSearchForm">清空</el-button>
      <el-button v-if="permissions.eims_goods_add" size="mini" icon="el-icon-plus" type="primary" @click="addOrUpdateHandle('','add')">新增</el-button>
      <el-button v-if="permissions.eims_goods_add && ctgSaleId == 3" size="mini" icon="el-icon-plus" type="primary" @click="batchAdd('3')">批量新增</el-button>
      <el-button v-if="permissions.eims_goods_add && ctgSaleId == 5" size="mini" icon="el-icon-plus" type="primary" @click="batchAdd('5')">批量新增</el-button>
      <el-button v-if="permissions.eims_goods_edit" size="mini" icon="el-icon-edit" type="primary" @click="batchEditCostPriceHandle">批量修改成本价</el-button>
      <el-button v-if="permissions.eims_goods_del" size="mini" icon="el-icon-plus" type="primary" @click="batchDelete()">批量删除</el-button>
      <el-button v-if="permissions.eims_goods_edit" size="mini" type="primary" icon="el-icon-edit" @click="startOrStop('','1')">批量启用</el-button>
      <el-button v-if="permissions.eims_goods_edit" size="mini" type="primary" icon="el-icon-edit" @click="startOrStop('','0')">批量停用</el-button>
      <el-button v-if="permissions.eims_goods_edit" size="mini" type="primary" icon="el-icon-edit" @click="genViewName">生成显示名称</el-button>
    </el-button-group>
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="searchHandle">
        <el-form-item label="制造商">
          <el-input v-model="dataForm.supplyName">
            <el-button slot="append" @click="openDialog('supply')">选择</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="商品品种">
          <el-input v-model="dataForm.brandName">
            <el-button slot="append" @click="openDialog('brand')">选择</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="商品代码">
          <el-input v-model="dataForm.code"></el-input>
        </el-form-item>
        <el-form-item label="商品条码">
          <el-input v-model="dataForm.barcode"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="dataForm.name"></el-input>
        </el-form-item>
        <el-form-item label="型号">
          <el-input v-model="dataForm.spec"></el-input>
        </el-form-item>
        <el-form-item label="色号" v-if="[1,6,8].includes(ctgId)">
          <el-input v-model="dataForm.color"></el-input>
        </el-form-item>
        <el-form-item label="尺寸" v-if="[1,6].includes(ctgId)">
          <el-input v-model="dataForm.goodsSize"></el-input>
        </el-form-item>
        <el-form-item label="镜架材质" v-if="ctgId == 1">
          <el-select v-model="dataForm.frameMaterial" clearable>
            <el-option v-for="item in frameMaterialData" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工艺类型" v-if="ctgId == 1">
          <el-select v-model="dataForm.craftType" clearable>
            <el-option v-for="item in craftTypeData" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="配件类型" v-if="ctgId == 2">
          <el-select v-model="dataForm.accessoriesType" clearable>
            <el-option v-for="item in accessoryTypeData" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="球镜范围" v-if="[3,4].includes(ctgId)">
          <el-row>
            <el-col :span="11">
              <el-input v-model="dataForm.mirrorBallMin"></el-input>
            </el-col>
            <el-col :span="2" style="text-align: center;"> - </el-col>
            <el-col :span="11">
              <el-input v-model="dataForm.mirrorBallMax"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="柱镜范围" v-if="[3,4].includes(ctgId)">
          <el-row>
            <el-col :span="11">
              <el-input v-model="dataForm.columnMirrorMin"></el-input>
            </el-col>
            <el-col :span="2" style="text-align: center;"> - </el-col>
            <el-col :span="11">
              <el-input v-model="dataForm.columnMirrorMax"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="下加光" v-if="ctgId == 3">
          <el-row>
            <el-col :span="11">
              <el-input v-model="dataForm.toTheLightMin"></el-input>
            </el-col>
            <el-col :span="2" style="text-align: center;"> - </el-col>
            <el-col :span="11">
              <el-input v-model="dataForm.toTheLightMax"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="定做类型" v-if="[3,4].includes(ctgId)">
          <el-select v-model="dataForm.customizeType" clearable>
            <el-option v-for="item in bizData.customizeTypeData" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="材料分类" v-if="ctgId == 3">
          <el-select v-model="dataForm.lensMaterial" clearable>
            <el-option v-for="item in bizData.lensMaterial" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="镜片分类" v-if="ctgId == 3">
          <el-select v-model="dataForm.photometricClassification" clearable>
            <el-option v-for="item in bizData.photometricClassification" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="镜片功能" v-if="ctgId == 3">
          <el-select v-model="dataForm.lensFunction" clearable>
            <el-option v-for="item in lensFunction" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="渐进片分类" v-if="ctgId == 3">
          <el-select v-model="dataForm.progressiveSliceClassification" clearable>
            <el-option v-for="item in bizData.progressiveSliceClassification" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="折射率" v-if="ctgId == 3">
              <el-select v-model="dataForm.refractiveIndex" clearable>
                <el-option v-for="item in bizData.refractivityData" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
        <el-form-item label="曲率" v-if="ctgId == 4">
          <el-input v-model="dataForm.curvature"></el-input>
        </el-form-item>
        <el-form-item label="直径" v-if="ctgId == 4">
          <el-input v-model="dataForm.diameter"></el-input>
        </el-form-item>
        <el-form-item label="使用类型" v-if="ctgId == 4">
          <el-select v-model="dataForm.useType" clearable>
            <el-option v-for="item in bizData.useType" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="抛弃型类型" v-if="ctgId == 4">
          <el-select v-model="dataForm.disusedClassification" clearable>
            <el-option v-for="item in bizData.disusedClassification" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主容量" v-if="ctgId == 5">
          <el-input v-model="dataForm.primaryCapacity"></el-input>
        </el-form-item>
        <el-form-item label="次容量" v-if="ctgId == 5">
          <el-input v-model="dataForm.secondaryCapacity"></el-input>
        </el-form-item>
        <el-form-item label="商品状态">
          <el-select v-model="dataForm.status" clearable>
            <el-option value="1" label="启用"></el-option>
            <el-option value="0" label="停用"></el-option>
          </el-select>
        </el-form-item>
    </el-form>
    <div class="avue-crud">
      <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="handleSelectionChange" :max-height="tableHeight">
        <el-table-column type="selection" header-align="center" align="center" width="40"></el-table-column>
        <el-table-column prop="code" header-align="center" align="center" label="商品编码" width="180"></el-table-column>
        <el-table-column prop="viewGoodsName" header-align="center" align="center" label="商品名称"></el-table-column>
        <el-table-column prop="brandName" header-align="center" align="center" label="商品品种" width="230"></el-table-column>
        <el-table-column prop="unitType" header-align="center" align="center" label="计量单位" width="80">
          <template slot-scope="scope"> {{getUnitType(scope.row.unitType)}} </template>
        </el-table-column>
        <el-table-column prop="status" header-align="center" align="center" label="状态" width="50">
          <template slot-scope="scope">
            <span v-if="scope.row.status == '1'">启用</span><span v-if="scope.row.status == '0'">停用</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="操作" width="230" fixed="right">
          <template slot-scope="scope">
            <el-button v-if="permissions.eims_goods_edit" type="text" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row.id,'update')">修改</el-button>
            <el-button v-if="permissions.eims_goods_edit" type="text" icon="el-icon-collection" @click="addOrUpdateHandle(scope.row.id,'check')">查看</el-button>
            <el-button v-if="permissions.eims_goods_edit && scope.row.status == 1" type="text" icon="el-icon-lock" @click="startOrStop(scope.row.id,'0')" class="stop">停用</el-button>
            <el-button v-if="permissions.eims_goods_edit && scope.row.status == 0" type="text" icon="el-icon-unlock" @click="startOrStop(scope.row.id,'1')" class="enable">启用</el-button>
            <!-- <el-button v-if="permissions.eims_goods_edit" type="text" icon="el-icon-edit" @click="checkGoodsPrice(scope.row.id)">价格</el-button> -->
            <el-button v-if="permissions.eims_goods_del" type="text" icon="el-icon-delete" @click="deleteHandle(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="avue-crud__pagination" style="margin-bottom: 25px;">
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100, 200,500,1000]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>

    <edit-form v-if="editVisible" ref="editForm" @refreshDataList="getDataList"></edit-form>
    <goods-price v-if="goodsPriceVisible" ref="goodsPriceDetail" @refreshDataList="getDataList"></goods-price>

    <search-supply v-if="supplyVisible" ref="supplyDialog" @refreshData="getSupplyData"></search-supply>
    <search-brand v-if="brandVisible" ref="brandDialog" @refreshData="getBrandData"></search-brand>

    <ctg-form1 v-if="visible1" ref="ctgSale1" @refreshDataList="getDataList"></ctg-form1>
    <ctg-form2 v-if="visible2" ref="ctgSale2" @refreshDataList="getDataList" :accessoryTypeData="accessoryTypeData"></ctg-form2>
    <ctg-form3 v-if="visible3" ref="ctgSale3" @refreshDataList="getDataList"></ctg-form3>
    <ctg-form4 v-if="visible4" ref="ctgSale4" @refreshDataList="getDataList"></ctg-form4>
    <ctg-form5 v-if="visible5" ref="ctgSale5" @refreshDataList="getDataList"></ctg-form5>
    <ctg-form6 v-if="visible6" ref="ctgSale6" @refreshDataList="getDataList"></ctg-form6>
    <ctg-form7 v-if="visible7" ref="ctgSale7" @refreshDataList="getDataList"></ctg-form7>
    <ctg-form8 v-if="visible8" ref="ctgSale8" @refreshDataList="getDataList"></ctg-form8>
    <ctg-form9 v-if="visible9" ref="ctgSale9" @refreshDataList="getDataList"></ctg-form9>
    <ctg-form10 v-if="visible10" ref="ctgSale10" @refreshDataList="getDataList"></ctg-form10>
    <ctg-form11 v-if="visible11" ref="ctgSale11" @refreshDataList="getDataList"></ctg-form11>
    <ctg-form16 v-if="visible16" ref="ctgSale16" @refreshDataList="getDataList"></ctg-form16>

    <batch-add3 v-if="batchVisible3" ref="batchDialog3" @refreshDataList="getDataList"></batch-add3>
    <batch-add5 v-if="batchVisible5" ref="batchDialog5" @refreshDataList="getDataList"></batch-add5>


    <el-dialog title="批量修改成本价" :visible.sync="costPriceVisible" width="30%">
      <el-form>
          <el-form-item label="成本价格">
            <el-input v-model="costPrice"></el-input>
          </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="costPriceVisible = false">取 消</el-button>
        <el-button type="primary" @click="costPriceEditHandle">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { filterParams } from '@/util/tools'
  import { remote } from '@/api/admin/dict'
  import { goodsFetchList,batchUpdateGoods,goodsDelObj,genViewName,batchRemove, batchEditCostPrice } from '@/api/eims/goods'

  import GoodsPrice from '../price'
  import EditForm from '../form/ctg-sale1'

  import SearchSupply from '@/components/business/SearchSupply'
  import SearchBrand from '@/components/business/SearchBrand'

  import CtgForm1 from '../form/ctg-sale1'
  import CtgForm2 from '../form/ctg-sale2'
  import CtgForm3 from '../form/ctg-sale3'
  import CtgForm4 from '../form/ctg-sale4'
  import CtgForm5 from '../form/ctg-sale5'
  import CtgForm6 from '../form/ctg-sale6'
  import CtgForm7 from '../form/ctg-sale7'
  import CtgForm8 from '../form/ctg-sale8'
  import CtgForm9 from '../form/ctg-sale9'
  import CtgForm10 from '../form/ctg-sale10'
  import CtgForm11 from '../form/ctg-sale11'
	import CtgForm16 from '../form/ctg-sale16'

  import BatchAdd3 from '../batch/CtgBatch3'
  import BatchAdd5 from '../batch/CtgBatch4'


  export default {
    props:["ctgId","ctgSaleId"],
    data(){
      return {
        unitTypeData: [],
        frameMaterialData: [],
        craftTypeData: [],
        lensFunction: [],
        accessoryTypeData: [],
        costPrice: '',
        dataForm: {
          supplyId: '',
          supplyName: '',
          brandId: '',
          brandName: '',
          code: '',
          bracode: '',
          name: '',
          spec: '',
          color: '',
          goodsSize: '',
          frameMaterial: '',    //  镜架材质
          craftType: '',        //  工艺类型
          accessoriesType: '',  //  配件型
          customizedMirrorBallMin: '',  //  球镜下限
          customizedMirrorBallMax: '',  //  球镜上限
          customizedColumnMirrorMin: '',
          customizedColumnMirrorMax: '',
          toTheLightMin: '',
          toTheLightMax: '',
          customizeType: '',    //  定做类型
          lensMaterial: '',     //  材料分类
          photometricClassification: '',    //  光度分类
          lensFunction: '',     //  镜片功能
          progressiveSliceClassification: '',   //  渐进片分类
          curvature: '',        //  曲率
          diameter: '',         //  直径
          useType: '',          //  使用类型
          disusedClassification: '',        //  抛弃型类型
          primaryCapacity: '',  //  主容量
          secondaryCapacity: '',  //  次容量
        },
        selectList: [],
        dataList: [],
        dataListLoading: false,
        pageIndex: 1,
        pageSize: 500,
        totalPage: 0,
        editVisible: false,
        goodsPriceVisible: false,
        supplyVisible: false,
        brandVisible: false,
        visible1: false,
        visible2: false,
        visible3: false,
        visible4: false,
        visible5: false,
        visible6: false,
        visible7: false,
        visible8: false,
        visible9: false,
        visible10: false,
        visible11: false,
				visible16: false,
        batchVisible3: false,
        batchVisible5: false,
        costPriceVisible: false
      }
    },
    components:{
      EditForm,
      GoodsPrice,
      SearchSupply,
      SearchBrand,
      CtgForm1,
      CtgForm2,
      CtgForm3,
      CtgForm4,
      CtgForm5,
      CtgForm6,
      CtgForm7,
      CtgForm8,
      CtgForm9,
      CtgForm10,
      CtgForm11,
			CtgForm16,
      BatchAdd3,
      BatchAdd5
    },
    computed: {
      ...mapGetters(['permissions', 'bizData']),
			tableHeight: function(){
				return window.innerHeight - 350
			}
    },
    created() {
      this.getDataList()
      remote('unit_type').then(result => {
        this.unitTypeData = result.data.data
      })
      remote('frame_material').then(result => {
        this.frameMaterialData = result.data.data
      })
      remote('craft_type').then(result => {
        this.craftTypeData = result.data.data
      })
      remote('lens_function').then(result => {
        this.lensFunction = result.data.data
      })
      remote('accessory_type').then(result => {
        this.accessoryTypeData = result.data.data
      })
    },
    methods:{
			//	查询数据
			searchHandle() {
				this.pageIndex = 1
				this.getDataList()
			},
      //  获取商品数据列表
      getDataList() {
        this.dataForm.ctgId = this.ctgId
        this.dataForm.ctgSaleId = this.ctgSaleId
        this.dataListLoading = true
        if(this.dataForm.ctgSaleId==4 || this.dataForm.ctgSaleId==6){
          this.dataForm.customizeType = "1"
        }else if(this.dataForm.ctgSaleId==3 || this.dataForm.ctgSaleId==4){
          this.dataForm.customizeType = "0"
        }
        let params1 = { current: this.pageIndex, size: this.pageSize }
        let params2 = filterParams(this.dataForm)
        goodsFetchList(Object.assign(params1,params2)).then(response => {
          if(response.data.code == '0'){
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
          }else{
            this.$message.error(response.data.msg)
          }
					this.dataListLoading = false
        })

      },
      //  清空搜索表单
      clearSearchForm() {
        for(let key in this.dataForm){
          this.dataForm[key] = ''
        }
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      handleSelectionChange(val) {
        this.selectList = val
      },
      // 新增 / 修改
      addOrUpdateHandle(id,type) {
        this['visible' + this.ctgSaleId] = true
        this.$nextTick(() => {
          let params = {
            id: id,
            ctgId: this.ctgId,
            ctgSaleId: this.ctgSaleId,
            type: type
          }
          this.$refs['ctgSale' + this.ctgSaleId].init(params)
        })
      },
      //  批量新增
      batchAdd(ctgSaleId){
        if(ctgSaleId == '3'){
          this.batchVisible3 = true
          this.$nextTick(() => {
            this.$refs.batchDialog3.init()
          })
        }else if(ctgSaleId == '5'){
          this.batchVisible5 = true
          this.$nextTick(() => {
            this.$refs.batchDialog5.init()
          })
        }
      },
      // 删除
      deleteHandle(id) {
        this.$confirm('是否确认删除ID为' + id, '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(function() {
          return goodsDelObj(id)
        }).then(response => {
          if(response.data.code == '0'){
            this.$message.success('删除成功')
            this.getDataList()
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      // 批量修改成本价
      batchEditCostPriceHandle(){
        if(this.selectList.length){
          this.$nextTick(() => {
            this.costPrice = ''
            this.costPriceVisible = true
          })
        }else{
          this.$message.warning('请选择要修改成本价格的商品')
        }
      },
      // 修改成本价格
      costPriceEditHandle(){
        if(this.costPrice){
          let ids = []
          this.selectList.forEach(item => {
            ids.push(item.id)
          })
          let data ={
            ids : ids
          }
          batchEditCostPrice(this.costPrice,ids).then(response => {
            if(response.data.code == '0'){
              this.$message.success("修改成本价格成功,更新" + response.data.data + '条数据')
              this.getDataList()
              this.costPriceVisible = false
            }else{
              this.$message.error(response.data.msg)
            }
          })
        }else{
          this.$message.marning('请填写修改后的成本价格')
        }
        
      },
      //批量删除
      batchDelete(){
        let ids = []
        this.selectList.forEach(item => {
          ids.push(item.id)
        })
        let data ={
          ids : ids
        }
        this.$confirm('是否确认批量删除商品', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'})
        .then(function() {
          return batchRemove(data)
        }).then(response => {
          if(response.data.code == '0'){
            this.$message.success("批量删除商品成功")
            this.getDataList()
          }else{
            this.$message.error(response.data.msg)
          }
        })

      },
      //  启用、停用
      startOrStop(id,status){
        let ids = []
        if(id){ ids.push(id) }else{
          this.selectList.forEach(item => {
            ids.push(item.id)
          })
        }
        let data = {
          idList: ids,
          status: status
        }
        this.$confirm('是否确认启用/停用商品', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(function() {
          return batchUpdateGoods(data)
        }).then(response => {
          if(response.data.code == '0'){
            if(status == 1){this.$message.success('启用成功')}else{this.$message.success('停用成功')}
            this.getDataList()
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      genViewName(){
          this.dataForm.ctgId = this.ctgId
          this.dataForm.ctgSaleId = this.ctgSaleId
          this.dataListLoading = true
          let params1 = { current: this.pageIndex, size: this.pageSize }
          let params2 = filterParams(this.dataForm)
          genViewName(Object.assign(params1,params2)).then(response => {
            if(response.data.code == '0'){
              this.$message.success('生成成功')
              this.getDataList()
            }else{
              this.$message.error(response.data.msg)
            }
          })
      },
      // 查看商品价格信息
      checkGoodsPrice(id) {
        this.goodsPriceVisible = true
        this.$nextTick(() => { this.$refs.goodsPriceDetail.getDataList(id) })
      },
      // 根据计量单位值获取名称
      getUnitType(value) {
        let obj = {}
        obj = this.unitTypeData.find(item => {
          return item.value == value
        })
        if(obj && obj.label){
          return obj.label
        }
      },
      //  打开弹窗
      openDialog(name){
        if(name == 'supply') {
          let data = { ctgId: this.ctgId }
          this.supplyVisible = true
          this.$nextTick(() => {
            this.$refs.supplyDialog.init(data)
          })
        }else if(name = 'brand') {
          let data = {
            ctgId: this.ctgId,
            supplyId: this.dataForm.supplyId
          }
          this.brandVisible = true
          this.$nextTick(() => {
            this.$refs.brandDialog.init(data)
          })
        }
      },
      //  获取制造商数据
      getSupplyData(data) {
        this.dataForm.supplyId = data.id
        this.dataForm.supplyName = data.name
      },
      //  获取商品品种信息
      getBrandData(data) {
        this.dataForm.brandId = data.id
        this.dataForm.brandName = data.name
      }
    }
  }
</script>

<style>
  .enable {
    color: #e6a23c!important;
  }
</style>
